<template>
  <el-dialog title="文件下载"
             :visible="show"
             width="50%"
             @close="handleCloseElementDialog">
    <el-table :data="currentData"
              height="400px"
              style="width: 100%">
      <el-table-column type="index"
                       width="50"
                       label="序号">
      </el-table-column>
      <template v-for="(item, index) in column">
        <el-table-column :key="index"
                         :prop="item.name"
                         :label="item.label"
                         :show-overflow-tooltip="true"
                         :width="item.name === 'operation'?'130px':null">
          <template slot-scope="scope">
            <div v-if="item.name === 'finshing'">
              <el-tag v-if="scope.row.status === 1">已完成</el-tag>
              <el-progress v-else
                           :percentage="scope.row.progress"
                           :color="customColor" />
            </div>
            <div v-else-if="item.name === 'operation'">
              <el-button type="text"
                         :disabled="!scope.row.url"
                         @click="handleDownload(scope.row)">下载</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text"
                         @click="remove(scope.row)">删除</el-button>
            </div>
            <div v-else-if="item.name === 'status'">
              <div v-if="scope.row.url">{{ scope.row.downloaded ? "已下载" : "未下载" }}</div>
              <div v-else>--</div>
            </div>
            <div v-else>{{ scope.row[item.name] || '--' }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleCloseElementDialog">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { dtEquipment } from "@/api/index";

export default {
  name: 'DownloadDialog',
  model: {
    prop: 'show',
    event: 'my-close'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      customColor: '',
      currentData: [], // 数据源
      timer: null,
      column: [
        { label: "文件名称", name: "name" },
        { label: "导出时间", name: "createAt" },
        { label: "预计完成", name: "finshing" },
        { label: "下载状态", name: "status" },
        { label: "操作", name: "operation" }
      ]
    };
  },
  computed: {
    params () {
      return {
        sort: [{ name: "createAt", asc: false }]
      }
    }
  },
  watch: {
    show () {
      this.getList();
    }
  },
  methods: {
    // 列表查询
    async getList () {
      const { data } = await dtEquipment.getSearch(this.params);
      const { records } = data?.data
      this.currentData = records;
      const isRecords = records?.some(item => item.status !== 1)
      if (isRecords) {
        this.refresh()
      }
    },
    // 刷新 
    refresh () {
      this.timer = setTimeout(() => {
        if (this.show) {
          this.getList()
        }
      }, 5000)
    },
    // 下载
    async handleDownload (row) {
      await dtEquipment.getTaskStatus({ exportTaskId: row.exportTaskId })
      let newUrl = row.url.includes('https') ? row.url : row.url.replace('http', 'https')
      window.location.href = newUrl
      this.$emit("updateCount")
      // this.searchCount();
      this.getList();
    },
    // 删除
    async remove (row) {
      await dtEquipment.clearExportTask(row.exportTaskId);
      this.$emit("updateCount")
      this.$message({ type: "success", message: "操作成功！" });
      // this.searchCount()
      this.getList()
    },
    handleCloseElementDialog () {
      this.$emit('my-close', false)
      clearTimeout(this.timer);
    }
  }
}
</script>

<style scoped>
.mt10 {
  margin-top: 10px;
}
</style>